<!-- 工装位置  -->
<template>
    <div style="padding: 20px;flex: 1;display: flex;flex-direction: column;height: 100%;">
        <div class="shining-text" style="font-size: 2vw;padding-bottom: 10px;">
            {{ props.title }}
        </div>
        <div style="flex: 1;display: flex;gap: 7px;">
            <!-- 左侧内容区域，内容区域需要3等分.每个部分垂直布局 -->
            <div v-if="loaded" class="shelf-container" style="flex: 1;display: flex;gap: 10px;  ">


                <div v-for="(group, groupIndex) in reversedGroups" :key="groupIndex" class="group">
                    <div v-for="(layer, layerIndex) in reversedLayers(group)" :key="layerIndex" class="shelf-layer">

                        <div v-for="cell in reversedCells(layer)" :key="cell.id" class="shelf-cell"
                            :class="getCellClass(cell)">
                            <div   v-if="cell.fixtureId > 0" class="cell-fixtureId">{{ cell.fixtureId }}</div>
                            <div class="cell-id">{{ cell.cellId }}</div>
                            <!-- <div class="cell-status">{{ getStatusText(cell.status) }}</div> -->
                        </div>

                    </div>
                    <!-- 尾巴描述信息 -->
                    <!-- <div v-if="groupIndex==2" class="bottom-tag">最下层位置编号：1 - 9 </div>
                     <div v-if="groupIndex==1" class="bottom-tag">最下层位置编号：28 - 09 </div>
                     <div v-if="groupIndex==0" class="bottom-tag">最下层位置编号：361 - 171 </div> -->
                </div>



                <!-- 1/3 -->
                <div v-if="false" class="group">

                    <!-- 9行 -->
                    <div v-for="row in rowIds1" style="display: flex;flex: 1;gap: 3px; overflow: hidden;">
                        <div v-for="item in shelf.rows[row]" class="item cell-empty"
                            :ref="(el) => refs[`ref${item.id}`] = el">
                            <!-- <div v-if="id == 1 || id == 9"> {{ id }}</div> -->

                        </div>
                    </div>

                    <!-- 尾巴描述信息 -->
                    <div class="bottom-tag">最下层位置编号：1 - 9 </div>
                </div>

                <!-- 2/3 -->
                <div v-if="false" class="group">

                    <!-- 9行 -->
                    <div v-for="row in rowIds2" style="display: flex;flex: 1;gap: 3px; overflow: hidden;">
                        <div v-for="item in shelf.rows[row]" class="item cell-empty"
                            :ref="(el) => refs[`ref${item.id}`] = el">

                        </div>
                        <!-- <div v-for="item in shelf.rows[row]" class="cell-end" :ref="(el)=> refs[`ref${item.id}`]=el" >
                           
                        </div> -->
                    </div>
                    <!-- 尾巴描述信息 -->
                    <div class="bottom-tag">最下层位置编号：28 - 09 </div>
                </div>

                <!-- 3/3 -->
                <div v-if="false" class="group">

                    <!-- 9行 -->
                    <div v-for="row in rowIds3" style="display: flex;flex: 1;gap: 3px; overflow: hidden;">
                        <div v-for="item in shelf.rows[row]" class="item cell-empty"
                            :ref="(el) => refs[`ref${item.id}`] = el">

                        </div>
                    </div>
                    <!-- 尾巴描述信息  163-171 -->
                    <div class="bottom-tag">最下层位置编号：361 - 171 </div>
                </div>

            </div>

            <!-- 右侧标记 -->
            <div style="display: flex;flex-direction: column;gap: 7px;">
                <div>
                    <div class="cell-empty" style="width: 34.6px;height: 21.95px;display: inline-block;" />:空
                </div>
                <div>
                    <div class="cell-1" style="width: 34.6px;height: 21.95px;display: inline-block;" />:未钎焊
                </div>
                <div>
                    <div class="cell-2" style="width: 34.6px;height: 21.95px;display: inline-block;" />:已钎焊
                </div>
                <div>
                    <div class="cell-3" style="width: 34.6px;height: 21.95px;display: inline-block;" />:已钎焊引导NG
                </div>
                <div>
                    <div class="cell-4" style="width: 34.6px;height: 21.95px;display: inline-block;" />:空且放检测NG
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

// 状态映射配置
const statusMap = {
    0: { text: '空', class: 'cell-empty' },
    1: { text: '未钎焊', class: 'cell-unwelded' },
    2: { text: '已钎焊', class: 'cell-welded' },
    3: { text: '钎焊NG', class: 'cell-welded-ng' },
    4: { text: '检测NG', class: 'cell-check-ng' }
};

const props = defineProps({
    title: {
        type: String,
        default: '料架状态显示'
    },
    cells: {
        type: Array,
        required: false,
        default: () => Array.from({ length: 243 }, (_, i) => {
            const cellId = i + 1;
            const group = Math.floor((cellId - 1) / 81) + 1;
            const layer = Math.floor(((cellId - 1) % 81) / 9) + 1;
            const position = (cellId - 1) % 9 + 1;

            let status = 0;

            return {
                cellId: cellId,
                status: status,
                fixtureId: status !== 0 ? `${cellId}` : ''
            };
        }),
        validator: (value) => {
            if (!value) return true;
            return value.length === 243 &&
                value.every(cell =>
                    cell?.cellId &&
                    cell?.status !== undefined &&
                    cell?.fixtureId !== undefined
                );
        }
    },
    showType: {
        type: Number,
        default: 1
    }
});

// 常量定义
const totalGroups = 3;
const totalLayers = 9;
const cellsPerLayer = 9;

// 计算属性
const currentCells = computed(() => props.cells || defaultCells);
const groupedCells = computed(() => {
    const groups = Array.from({ length: totalGroups }, () =>
        Array.from({ length: totalLayers }, () => [])
    );

    for (let i = 0; i < 243; i++) {
        const groupIndex = Math.floor(i / 81);
        const layerIndex = Math.floor((i % 81) / cellsPerLayer);
        groups[groupIndex][layerIndex].push(currentCells.value[i]);
    }

    return groups;
});

const reversedGroups = computed(() => [...groupedCells.value].reverse());
const reversedLayers = (group) => [...group].reverse();
const reversedCells = (layer) => [...layer].reverse();

const loaded = ref(false)
const refs = ref({});

let shelf = reactive({ rows: [] })



let jkk = true
let cleaning = false
function changeStyle(myDiv, data) {
    // console.log('UpdateUIData',myDiv)
    if (myDiv) {
        // jkk = !jkk
        // myDiv.style.color =  'red'; // 修改字体颜色
        // if(cleaning)
        //     myDiv.style.backgroundColor = 'black'; // 修改背景颜色
        // else
        //     myDiv.style.backgroundColor = jkk? 'yellow':'blue'; // 修改背景颜色

        //判断状态显示对应的颜色

        // 修改文字
        let html = ''
        if (data.fixtureId > 0) {
            if (props.showType === 1)
                html = ` <div>  ${data.fixtureId} </div> `
        }
        if (props.showType === 2)
            html = ` <div>  ${data.cellId} </div> `
        myDiv.innerHTML = html;



        let classObj = getCellClass(data)
        for (const [className, shouldApply] of Object.entries(classObj)) {
            if (shouldApply) {
                myDiv.classList.add(className);
            } else {
                myDiv.classList.remove(className);
            }
        }



    }
}

const getCellClass = (cell) => {
    return {
        'cell-empty': cell.status === 0,
        'cell-1': cell.status === 1,
        'cell-2': cell.status === 2,
        'cell-3': cell.status === 3,
        'cell-4': cell.status === 4,
    };
}

loaded.value = true
onMounted(() => {
    let jk = 0
    // setInterval(() => {
    //     if(loaded.value)
    // {
    //     jk++
    //     if(jk == 217)
    //         {
    //             jk =1
    //             jkk = !jkk
    //             cleaning = !cleaning
    //         }
    //     changeStyle(refs.value[`ref${jk}`])
    // }

    // }, 30);

})

//已知ID，设置不同的颜色
const UpdateUIData = (data) => {
    if (data.length === 0) {

        for (let myDiv of Object.values(refs.value)) {
            //myDiv.style.backgroundColor = 'black'; // 修改背景颜色
            myDiv.classList.add('cell-empty');
            myDiv.textContent = '';
        }
    }

    for (let a of data) {
        var id = a.cellId
        changeStyle(refs.value[`ref${id}`], a)
    }
}

defineExpose({ UpdateUIData })


</script>

<style lang='scss' scoped>
.shelf-cell {
    flex: 1;
    position: relative;
    box-sizing: border-box;
    /* 确保padding和border不会影响宽度计算 */
    overflow: hidden;
    //white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;

}

.shelf-container {
    color: aqua;
}

.group {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    overflow: hidden;
    font-size: 14px;
}

.shining-text {
    font-size: 36px;
    //font-weight: bold;

}


.bottom-tag {
    text-align: center;
    background-color: white;
    direction: rtl;
    unicode-bidi: bidi-override;
    color: red;
    opacity: 0.5;
}

.cell-empty {
    position: relative;
    background-color: white;
}

/* 虚线背景效果 */
.cell-empty::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 2px dashed #ccc;
    border-radius: 4px;
    pointer-events: none;
}


.cell-1 {
    background-color: green;
}

.cell-2 {
    background-color: blue;
}

.cell-3 {
    background-color: orange;
    color: rgb(42, 39, 39);
}

.cell-4 {
    background-color: yellow;
    color: black;
}

.cell-end {
    position: fixed;
    bottom: 0;
}

.shelf-layer {
    display: flex;
    flex: 1;
    gap: 3px;
    overflow: hidden;
}

.cell-id {
    color: #050101;
   
    font-weight: bold;
    position: absolute;
    bottom: -2px;
    left: 0; 
    font-size: 16px; /* 初始放大2倍 */
    animation: shrinkText 2s ease-in-out forwards;
}

@keyframes shrinkText {
  from { font-size: 16px; }
  to { font-size: 8px; } /* 恢复原始大小 */
}
.cell-fixtureId{
    transform: translateY(-2px);
    
    font-weight: bold;
    font-size: 1px;
    animation: shrinkText2 2s ease-in-out forwards;
}
@keyframes shrinkText2 {
  from { font-size: 1px; }
  to { font-size: 13px; } /* 恢复原始大小 */
}
</style>